<template>
  <div>
    <!-- 轮播 -->
    <el-carousel height="600px">
      <el-carousel-item v-for="item in imgArray" :key="item">
        <img :src="item" class="rigthtImg" />
      </el-carousel-item>
    </el-carousel>
    <!-- 产品中心 -->
    <div class="list_title">
      <h2>产品中心</h2>
      <p>
        <span>————————————</span>
        100%品质保障。全国配送
        <span>————————————</span>
      </p>
    </div>
    <div class="list_tp">
      <router-link class="list_xtp" v-for="item in 8" :key="item" to="/ab">
        <img src="../assets/images/sy.jpg" alt="" />
        <p>进口郁金香鲜花芍药混搭花束</p>
      </router-link>
    </div>

    <div class="bg">
      <div class="container">
        <div class="tabs_head">
          <h2>选择我们四大优势</h2>
          <p>
            <span>————————————</span>
            7*24小时送花上门
            <span>————————————</span>
          </p>
        </div>
        <div class="tabs_btn">
          <ul class="nav">
            <li
              @click="checkCell(index)"
              v-for="(item, index) in textArry"
              :key="index"
            >
              <a :class="active == index ? 'active' : ''">{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="tabpan1">
          <div class="left">
            <img :src="Arry[active].image" alt="" />
          </div>
          <div class="right">
            <h3>{{ Arry[active].title }}</h3>
            <p>
              {{ Arry[active].details }}
            </p>
            <router-link class="tab_more" to="/ab">{{ Arry[active].btnText }}</router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 客户案例 -->
    <div class="case_head">
      <h2>客户案例</h2>
      <p>
        <span>————————————</span>
        携手同行，与您一起塑造未来
        <span>————————————</span>
      </p>
    </div>
    <div class="case_index">
      <div class="case_list" v-for="(item, index) in 3" :key="index">
        <div class="case">
          <div class="thumbnail">
            <router-link to="/ab">
            <img src="../assets/images/src.png" alt="" />
            <h4 class="case_title">产品名称</h4>
            <p class="case_des">
              我把你当作我的空气，捧你在我手心，在爱的纯净世界，你就是我唯一，我唯一爱的就是你！...
            </p>
           </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 关于我们 -->
    <div class="bg1">
      <div class="row">
        <div class="about_head">
          <h2>关于我们</h2>
          <p>
            <span>————————————</span>
            近万家加盟花店，网络覆盖全国。
            <span>————————————</span>
          </p>
        </div>
        <div class="ab">
          <div class="about_left">
            <div class="about">
              <h3>ABOUT US</h3>
              <p>开封鲜花配送有限公司</p>
            </div>
            <div class="content">
              达购物平台销售的产品：移动电源，充电电池、手机电池，手机/IT配件，除享受国家规定的三包服务外（贴膜、保护壳等不在此列），我们为我们的会员提供7天无条件退换货服务（在包装完好且不影响二次销售的前提下），同时会员从购买收到货物的当日起，...
            </div>
          </div>
          <img src="../assets/images/about1.jpg" class="about_img" />
        </div>
      </div>
    </div>
    <!-- 新闻资讯 -->
    <div class="container">
      <div class="new_head">
        <h2>新闻资讯</h2>
        <p>
          <span>————————————</span>
          连线行业前沿资讯
          <span>————————————</span>
        </p>
      </div>
      <div class="new_row">
        <div class="new_left">
          <h3 class="new_h3">公司新闻</h3>
          <img src="../assets/images/news_title.jpg" class="new_Img" />
          <ul class="new_ul">
            <li>
              <div class="new_img">
                <a href="">
                  <img src="../assets/images/src.png" alt="" />
                </a>
                <a href="" class="a">国庆节朋友结婚送什么花</a>
                <p class="new_title_p">2020-05-23</p>
                <p>
                  有很多人选择国庆节这天作为他们结婚的日子，这样一来，这一天即是国家的日子，也是他们...
                </p>
              </div>
            </li>
            <li v-for="(item, index) in 5" :key="index">
              <router-link to="/ab">国庆节朋友结婚送什么花</router-link>
              <span class="new_time">2020-05-23</span>
            </li>
          </ul>
        </div>
        <div class="new_right">
          <h3 class="new_h3">常见问题</h3>
          <img src="../assets/images/news_title.jpg" class="new_Img" />
          <ul class="anser_ul" v-for="(item, index) in 5" :key="index">
            <li>
              <router-link to="/ab">国庆节朋友结婚送什么花</router-link>
              <p>
                有很多人选择国庆节这天作为他们结婚的日子，这样一来，这一天即是国家的日子，也是他们...
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 客户合作 -->
    <div class="case_head">
      <h2>客户合作</h2>
      <p>
        <span>————————————</span>
        合作万千客户 只因好品质
        <span>————————————</span>
      </p>
    </div>
    <div class="kh">
      <div v-for="item in kh" :key="item">
        <img :src="item" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgArray: [
        require("../assets/images/banner1.png"),
        require("../assets/images/banner2.png"),
        require("../assets/images/banner3.png"),
      ],
      kh: [
        require("../assets/images/case1.png"),
        require("../assets/images/case2.png"),
        require("../assets/images/case3.png"),
        require("../assets/images/case4.png"),
      ],
      active: 0,
      Arry: [
        {
          image: require("../assets/images/youshi1.png"),
          title: "品牌实力",
          details:
            "我们企业从哥伦比亚进口所用的永生花花的原材料，经过两三年的磨合后，和外国企业联合了起来，直接在玫瑰鲜",
          btnText: "立即咨询",
        },
        {
          image: require("../assets/images/youshi2.png"),
          title: "设计团队",
          details:
            "我们企业拥有全国优异的永生花礼盒设计师，以及国际优异永生花摆放设计师，为您量身定制专属于您和TA之间的",
          btnText: "查看详情",
        },
        {
          image: require("../assets/images/youshi3.png"),
          title: "制造工艺",
          details:
            "把鲜花在采摘后30分钟内，利用有机保存液来跟植物的交换水分取代的一种特殊加工技术。新技术可以让鲜花的组",
          btnText: "查看详情",
        },
        {
          image: require("../assets/images/youshi4.png"),
          title: "产品种类",
          details:
            "产品种类丰富，色彩多样。花头预留花径较长，便于后期花艺加工。大量采购，颜色可定制。并可以为客户赠礼提",
          btnText: "查看详情",
        },
      ],
      textArry: ["品牌实力", "设计团队", "制造工艺", "产品种类"],
    };
  },
  methods: {
    checkCell(index) {
      this.active = index;
    },
  },
};
</script>
<style scoped>
/* 产品中心 */
.el-carousel:hover {
  cursor: pointer;
}
.list_title h2 {
  text-align: center;
  margin-top: 60px;
  font-size: 36px;
  color: #585858;
  font-weight: bold;
}
.list_title p {
  text-align: center;
  color: #7f7f7f;
  margin-top: 8px;
  margin: 0px 0px 10px;
}
.list_title {
  text-align: center;
}
.list_xtp {
  float: left;
  padding: 29px 10px;
  margin: 0 auto;
}
.list_xtp:hover {
  cursor: pointer;
}
.list_xtp img {
  width: 230px;
  height: 230px;
}
.list_xtp p {
  text-align: center;
}
.list_xtp p:hover {
  color: #0071bf;
}
.list_tp {
  margin: 0 auto;
  width: 1000px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.bg {
  background-image: url(../assets/images/bg1.png);
  width: 100%;
  height: 650px;
}
.tabs_head h2 {
  padding-top: 60px;
  font-size: 36px;
  color: #d2351f;
  text-align: center;
  font-weight: bold;
}
.tabs_head p {
  color: #d2351f;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 35px;
}
.tabs_btn {
  width: 100%;
  text-align: center;
}
.nav {
  list-style: none;
  display: inline-block;
  padding: 10px;
}
.nav > li {
  margin-bottom: 10px;
  float: left;
  display: block;
  position: relative;
}
.nav > li > a {
  color: #000;
  position: relative;
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  background-color: #fff;
  margin-right: 10px;
  margin-left: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
.nav > li :hover {
  color: #fff;
  background-color: #595959;
  border: 0px;
  cursor: pointer;
}
.tabpan1 {
  position: relative;
  display: block;
  width: 1000px;
  height: 350px;
  background-color: #fff;
  margin: 0px auto;
}
.left img {
  width: 500px;
  height: 350px;
  float: left;
}
.right {
  display: block;
  width: 50%;
  float: right;
}
.right h3 {
  font-size: 32px;
  font-weight: bold;
  margin: 58px 50px 20px 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #eaeaea;
}
.right p {
  color: #7f7f7f;
  margin: 15px 0px 0px 25px;
  line-height: 26px;
}
.right a {
  display: inline-block;
  width: 170px;
  padding: 10px 0px;
  text-align: center;
  background-color: #d2351f;
  color: #fff;
  text-decoration: none;
  margin: 35px 0px 18px 25px;
}
.tab_more:hover {
  color: #fff;
  background-color: #595959;
  border: 0px;
}
.active {
  background-color: #595959 !important;
}
/* 客户案例 */
.case_head h2 {
  text-align: center;
  margin-top: 60px;
  font-size: 36px;
  color: #585858;
  font-weight: bold;
}
.case_head p {
  text-align: center;
  color: #7f7f7f;
  margin-top: 8px;
  margin: 0px 0px 40px;
}
.case_title {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
}
.case {
  position: relative;
  width: 400px;
}
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.thumbnail:hover {
  cursor: pointer;
}
.thumbnail a img {
  margin-right: 60px;
  margin-left: 65px;
  text-align: center;
}
.case_des {
  text-align: center;
  color: #9e9e9e;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 26px;
  margin-bottom: 30px;
}
.case_index {
  padding-bottom: 60px;
  display: flex;
  justify-content: center;
}
/* 关于我们 */
.bg1 {
  background-image: url(../assets/images/about.png);
  height: 500px;
  padding-bottom: 70px;
}
.ab {
  padding: 45px;
  display: flex;
  justify-content: center;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.about_head h2 {
  text-align: center;
  padding-top: 60px;
  font-size: 36px;
  color: #585858;
  font-weight: bold;
}
.about_head p {
  text-align: center;
  color: #7f7f7f;
  margin-top: 8px;
  margin-bottom: 50px;
  margin: 0 0 10px;
}
.about_left {
  height: 242px;
  width: 570px;
  padding-right: 15px;
  padding-left: 15px;
}
.about h3 {
  font-family: Arial;
  color: #d2351f;
  font-size: 54px;
  font-weight: bold;
  margin: 0px;
}
.about p {
  font-size: 16px;
  color: #000;
  padding-bottom: 20px;
  border-bottom: 1px solid #dadada;
  margin: 0 0 10px;
}
.content {
  font-size: 14px;
  line-height: 30px;
  color: #555;
  margin-top: 20px;
}
.about_img {
  padding-left: 20px;
  width: 350px;
  height: 350px;
}
/* 新闻资讯 */
.new_head h2 {
  text-align: center;
  padding-top: 60px;
  font-size: 36px;
  color: #585858;
  font-weight: bold;
}
.new_head p {
  text-align: center;
  color: #7f7f7f;
  padding-top: 10px;
  margin-bottom: 50px;
  margin: 0 0 10px;
}
.h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.1;
  color: inherit;
}
.new_left {
  width: 500px;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.new_h3 {
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}
.new_Img {
  padding-bottom: 35px;
}
.new_ul img {
  margin-right: 28px;
}
.new_ul {
  clear: both;
  list-style: none;
  margin-top: 10px;
  padding: 0px;
}
.new_ul li {
  color: #545455;
  line-height: 21px;
  padding: 10px 0px;
}
.new_ul li a {
  color: #2f2f2f;
  text-decoration: none;
  font-size: 16px;
}
.new_ul li a:hover {
  color: #23527c;
}
.new_img {
  height: 250px;
}
.new_img img {
  float: left;
}
.new_img a {
  font-weight: bold;
}
.new_title_p {
  margin-top: 12px;
  line-height: 26px;
}
.new_time {
  float: right;
}
.new_row {
  display: flex;
  justify-content: center;
}
.new_right {
  width: 500px;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 60px;
}
.anser_ul {
  clear: both;
  list-style: none;
  margin-top: 10px;
  padding: 0px;
}
.anser_ul li {
  color: #545455;
  line-height: 21px;
  padding: 1px 0px;
}
.anser_ul li a {
  display: block;
  background: url("../assets/images/ask.jpg") no-repeat left center;
  padding-left: 28px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
.anser_ul li a:hover {
  color: #23527c;
}
.anser_ul li p {
  background: url("../assets/images/answer.jpg") no-repeat left 12px;
  padding-left: 28px;
  margin-top: 10px;
  line-height: 22px;
  color: #555;
  margin: 0 0 10px;
  padding-top: 10px;
}
/* 客户合作 */
.kh {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}
.kh img {
  margin-right: 15px;
  margin-left: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0px 0px 0px 0px;
}
</style>